<template>
    <el-container>
        <el-header style="text-align: right; font-size: 12px">
            <div class="toolbar">
                <el-dropdown>
                    <el-icon style="margin-right: 8px; margin-top: 1px">
                        <setting/>
                    </el-icon>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>View</el-dropdown-item>
                            <el-dropdown-item>Add</el-dropdown-item>
                            <el-dropdown-item>Delete</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <span>Tom</span>
            </div>
        </el-header>

        <el-main>
            <el-scrollbar>
                <el-table :data="tableData">
                    <el-table-column prop="date" label="Date" width="140"/>
                    <el-table-column prop="name" label="Name" width="120"/>
                    <el-table-column prop="address" label="Address"/>
                </el-table>
            </el-scrollbar>
        </el-main>
    </el-container>
</template>

<script>
    import {ref} from "vue";

    export default {
        name: "Content",
        setup() {
            const item = {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            }
            const tableData = ref(Array.from({length: 5}).fill(item));
            return {
                item,
                tableData
            }
        }
    }
</script>

<style scoped>
    .layout-container-demo .el-header {
        position: relative;
        background-color: var(--el-color-primary-light-7);
        color: var(--el-text-color-primary);
    }

    .layout-container-demo .el-aside {
        color: var(--el-text-color-primary);
        background: var(--el-color-primary-light-8);
    }

    .layout-container-demo .el-menu {
        border-right: none;
    }

    .layout-container-demo .el-main {
        padding: 0;
    }

    .layout-container-demo .toolbar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        right: 20px;
    }
</style>